<template>
<div class="login">

  <div class="layout">

    <div class="head">
      <div class="logo"></div>
        <h1>欢迎登录</h1>
    </div>

    <div class="body">
      <li class="bgi">
        <img src="https://www.zhipin.com/sem/images/sem10/banner.png" alt="">
      </li>
      <li class="dl">
        
        <h2 class="title">
          <span>欢迎欢迎</span>
        </h2>
        

          <!-- Unnamed (单选框) -->
        <!-- <div id="u26" class="ax_单选框">
          <label for="u26_input">
            <div id="u27" class="text">
              <p><span>个人</span></p>
            </div>
          </label>
          <input id="u26_input" type="radio" value="radio" name="u26"/>
        </div> -->

        <!-- Unnamed (单选框) -->
      <!-- <div id="u28" class="ax_单选框">
        <label for="u28_input">
          <div id="u29" class="text">
            <p><span>企业</span></p>
          </div>
        </label>
        <input id="u28_input" type="radio" value="radio" name="u28"/>
      </div> -->


        <div class="input1">

          <label for="id" v-focus> 账号： </label>
          <input v-decorator="[ 'userName', { rules: [{ required: true, message: 'Please input your username!' }] },]" placeholder="用户名" v-model="username"/>

          <br /><br />

          <label for="name"> 密码： </label>
          <input v-decorator="[ 'password', { rules: [{ required: true, message: 'Please input your Password!' }] }, ]" type="password" placeholder="密码" v-model="password"/>

          <br /><br />

          <!-- <label for="check"> 验证码： </label>
          <input type="text" id="check1" v-model="check" value="ABCD"/> -->

        </div>

        <div id="denglu">      
          <a-button type="primary" html-type="submit" class="login-form-button" @click="login()">
              登录
          </a-button>
        </div>

      </li>
    </div>

    <div class="foot">
      <div class="text">
        <p>
          <span>微信版本更新帮助中心联系我们在线交流服务热线：400-605-9900 (9:00 -18:00)</span>
        </p>
        <p>
          <span>©2016 Lagou 京ICP备14023790号-2 京公网安备11010802017116号</span>
        </p>
      </div>
    </div>
  </div>

</div>
</template>

<script>
export default {
    name:'layout',
    data(){
        return{
            message:'欢迎登陆',
            username:'',
            password:'',
            logo:'https://www.lgstatic.com/lg-www-fed/common/widgets/header_c/modules/topbar/img/sprite_361857f.png'
        }
    },
    methods:{
      login(){
        if(this.username == 'company' && this.password == '123456'){
          this.$router.push("/company")
        }else if(this.username == 'parent' && this.password == '123456'){
          this.$router.push("/index")
        }else if(this.username == 'personal' && this.password == '123456'){
          this.$router.push("/personal")
        }else if(this.username == 'professor' && this.password == '123456'){
          this.$router.push("/professorPage")
        }
        else{
          this.$router.push("/login")
        }
      }
    }
    
}
</script>

<style scoped>
*{
margin:0px;
padding:0px;
}
.layout{
    margin: 0px;
    background-image: none;
    position: static;
    left: auto;
    width: 100%;
    height: 900px;
    margin: 0 auto;
    overflow: hidden;
    /* margin-left: 0;
    margin-right: 0; */
    text-align: left;
}
/* 头 */
.head{
    width: 100%;
    height: 75px;
    /* border: 1px solid red; */
    background-color: #202329;
  }
  .head .logo{
    position: relative;
    left: 0px;
    top: 0px;
    /* border: 1px solid red; */
    float: left;
    width: 90px;
    height: 68px;
    color: #fff;
}
.head >h1{
    position: relative;
    left: 15px;
    top: 15px;
    float: left;
    width: 129px;
    white-space: nowrap;
    color: #12ADA9;
}
/* 中间 */
.body{
    width: 100%;
    height: 700px;
    /* border: 1px solid red; */
    background-color: #12ADA9;
    display: flex;
  }
  /* 左边图片 */
.body .bgi{
    position: relative;
    left: 122px;
    top: 45px;
    width: 790px;
    height: 626px;
    /* border: 1px solid red; */
    float: left;
}
.body .bgi >img{
    display: block;
    width: 694px;
}
/* 右边登录 */
.body .dl{
    position: relative;
    left: 400px;
    top: 60px;
    width: 410px;
    height: 510px;
    background-color: aliceblue;
    box-shadow:0 0 10px 0 rgba(56,81,76,.12); 
    border-radius: 5px;
    /* border: 1px solid red; */
}
.dl .title{
    font-weight: normal;
    font-size: 26px;
    line-height: 32px;
    color: #5dd5c8;
    position: relative;
    top: 20px;
    text-align: center;
    /* border: 1px solid red; */
    height: 32px;
}
.dl .title >span{
  position: relative;
  top: 0px;
  left: 0px;
}
li{
  list-style-type: none;
}
.input1 {
  position: relative;
  left: 95px;
  top: 100px;
  right: 32px;
}
#check1{
  width: 100px;
}
#u10_input{
  width: 225px;
  height: 35px;
  background-color: 1890ff;
  color:#fff;
}
#denglu {
  position: relative;
  left: 95px;
  top: 124px;
}


/* 单选框 */
#u26,#u28 {
    position: relative;
    left: 85px;
    top: 37px;
    width: 50px;
    height: 16px;
}
.ax_单选框 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #333333;
    text-align: left;
    line-height: normal;
}
#u26_input,#u28_input {
    position: relative;
    left: -3px;
    top: -13px;
}


/* 脚 */
.foot{
    position: relative;
    /* left: 0px;
    top: 20px; */
    margin:0 auto;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    background-color: #202329;
  }
  .foot .text{
    position: relative;
    left: 2px;
    top: 40px;
    font-size: 13px;
    color:#fff;
  }
  p{
    margin: 0px!important;
    text-align: center;
    display:block;
  }
</style>


